<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!-- 导入JSTL标签库 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
  <head>
  	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>用户注册</title>
  </head>  
  <!-- JavaScript验证 -->
  <script language="javascript">
  	function checkForm(form) {
  		if(isEmpty(form.uid.value) || isEmpty(form.password.value) || isEmpty(form.confirmPassword.value) ||
  			isEmpty(form.email.value) || isEmpty(form.question.value) || isEmpty(form.answer.value) ) {
  			alert("请将必填项填写完整！");
  			return false;
  		}
  		if(form.password.value != form.confirmPassword.value) {
  			alert("两次密码不匹配！");
  			return false;
  		}
  		if(form.password.value.length<6||form.password.value.length>16) {
  			alert("密码长度不得少于6个字符，不得多于16个字符！");
  			return false;
  		}
  		return true;
  	}
  	function isEmpty(str) {
  		if(str == null || str.length==0) 
  			return true;
  		else 
  			return false;
  	}
  	
  	function checkUid(){
		var name=document.userRegisterForm.uid.value;
		if(name.length>0){
			window.open("checkUid.jsp?uid=" +name ,"检查用户名","toolbar=no, location=no,status=no,menubar=no, scrollbars=no,resizable=no,width=300,height=200");
		} else {
			alert("请输入用户名!");
		}
	}
  </script>
  <body>
    <form name="userRegisterForm" method="post" action="RegisterServlet" onsubmit="return checkForm(this);">
    	<table width="80%" border="0" align="center" cellpadding="2" cellspacing="0">
    		<caption><font color="blue" style="font-size:20px"><br><br><strong>用户注册</strong><br><br></font></caption>
    		<tr bgcolor="#EFEFEF">
    			<td width="25%" align="right">用户名：</td>
    			<td width="30%" valign="bottom"><input type="text" name="uid" id="uid" size="20" maxlength="50"></td>
    			<td width="45">*<input type="button" name="checkUser" value="查看是否被占用" onclick="checkUid();"></td>
    		</tr>    		
    		<!--  
    		<tr bgcolor="#EFEFEF">
    			<td colspan="3">(用户名由a~z的英文字母（不区分大小写）、0~9的数字、点、减号或下划线组成，长度为3~18个字符，只能以数字或字母开头和结束，例如：syjk3_001)</td>		    			
    		</tr>
    		-->
    		<tr>
    			<td align="right">密码：</td>
    			<td><input type="password" name="password" id="password" size="20" maxlength="50"></td>
    			<td>*(密码长度为6~16位，屈服字母大小写。登录密码可以由字母、数字、特殊字符组成)</td>
    		</tr>    		
    		<tr bgcolor="#EFEFEF">
    			<td height="40" valign="middle" align="right">密码确认：</td>
    			<td><input type="password" name="confirmPassword" id="confirmPassword" size="20" maxlength="50"></td>
    			<td>*(请再输一遍密码，以便确认！)</td>
    		</tr>
    		<tr>
    			<td valign="middle" align="right">电子邮件：</td>
    			<td><input type="text" name="email" id="email" size="20" maxlength="50"></td>
    			<td>*(请输入正确的E-mail地址！<font color=#cc0000>方便您的密码查询</font>)</td>
    		</tr>
    		<tr bgcolor="#EFEFEF">
    			<td align="right">性别：</td>
    			<td>
    				<p>
    					<label><input type="radio" name="gender" id="gender" value="1" checked>酷男</label>
    					<label><input type="radio" name="gender" id="gender" value="0">靓女</label>
    				</p>
    			</td>
    			<td>&nbsp;</td>    			    			
    		</tr>
    		<tr>
    			<td align="right" valign="middle"><div align="right">密码提示：</div></td>
    			<td><input type="text" name="question" id="question" size="20" maxlength="50"></td>
    			<td>*(账号验证以及用于帮你找回密码)</td>
    		</tr>
    		<tr bgcolor="#EFEFEF">
    			<td valign="middle"><div align="right">提示密码问题答案：</div></td>
    			<td><input type="text" name="answer" id="answer" size="20" maxlength="50"></td>
    			<td bgcolor="#EFEFEF">*(账号验证以及用于帮你找回密码！)</td>
    		</tr>
    		<tr>
    			<td align="right">真实姓名：</td>
    			<td><input type="text" name="realName" id="realName" size="20" maxlength="50"></td>
    			<td>&nbsp;</td>
    		</tr>
    		<tr bgcolor="#EFEFEF">
    			<td align="right">联系电话：</td>
    			<td><input type="text" name="tel" id="tel" size="20" maxlength="50" ></td>
    			<td>&nbsp;</td>
    		</tr>
    		<tr>
    			<td>&nbsp;</td>
    		</tr>
    		<tr>
    			<td colspan="3" align="center">
    			<input type="submit"name="Submit" value="提交" >&nbsp;&nbsp;&nbsp;
    			<input type="reset"name="Reset" value="重置" >
    			</td>    			
    		</tr>
    		<tr>    <!-- 实现空行 -->		
    		<td  align="center">&nbsp;</td>
    		</tr>
    		<tr>
    			<td colspan="3" align="center" ><c:out value="${requestScope.message}" /></td>
    		</tr>
    	</table>
    </form>
  </body>
</html>
